<template>
  <view style="padding: 10px;">
    <view class="list-item">
      <text>头像</text>
      <view class="vertical-middle">
        <image class="avatar" :src="userInfo.avatar || '/static/missing-face.png'"></image>
        <uni-icons type="right" size="22" color="grey"></uni-icons>
      </view>
    </view>

   <view class="list-item">
       <text>昵称</text>  
       <view class="vertical-middle">  
         <text @click="editNickname" v-if="!editingNickname">{{ userInfo.nickName }}</text>  
         <input type="text" v-model="nickname" v-if="editingNickname" @confirm="confirmEditNickname" @blur="cancelEditNickname" />  
         <uni-icons type="right" size="22" color="grey" v-if="!editingNickname"></uni-icons>  
       </view>  
   </view>  

    <view class="list-item">
      <text>手机号</text>
      <view class="vertical-middle">
        <text @click="editphonenumber" v-if="!editingphonenumber">{{ userInfo.phonenumber }}</text>
		<input type="text" v-model="phonenumber" v-if="editingphonenumber" @confirm="confirmEditphonenumber" @blur="cancelEditphonenumber" />  
        <uni-icons type="right" size="22" color="grey" v-if="!editingphonenumber"></uni-icons>
      </view>
    </view>

    <view class="list-item" @click="natoauthentication()">
      <text>实名认证</text>
      <view class="vertical-middle" v-show="authentication">
        <uni-icons type="checkbox-filled" size="22" color="green"></uni-icons>
        <text>已认证</text>
        <uni-icons type="right" size="22" color="grey"></uni-icons>
      </view>
      <view class="vertical-middle" v-show="!authentication">
        <uni-icons type="clear" size="22" color="yellow"></uni-icons>
        <text>未认证</text>
        <uni-icons type="right" size="22" color="grey"></uni-icons>
      </view>
    </view>
	
	<view class="list-item">
	  <text>操作密码</text>
	  <view class="vertical-middle">
	    <text @click="editpassword" v-if="!editingpassword">{{ userInfo.password }}</text>
		<input type="text" v-model="password" v-if="editingpassword" @confirm="confirmEditpassword" @blur="cancelEditpassword" />  
	    <uni-icons type="right" size="22" color="grey" v-if="!editingpassword"></uni-icons>
	  </view>
	</view>


    <view class="list-item" @click="handleLogout">
      <text>账号注销</text>
      <uni-icons type="right" size="22" color="grey"></uni-icons>
    </view>

  </view>
</template>

<script>
import { mapState } from 'vuex';
import { getUserInfo,updateInfo } from '@/api/user.js';

export default {
  data() {
    return {
      authentication: true,
      userInfo: null,
	  editingNickname: false,
	  editingphonenumber: false,
	  editingpassword: false,
	  nickname: '',
	  phonenumber:'',
	  password:''
    };
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo'])
  },
  created() {
    this.loadData();
  },
  methods: {
	  editNickname() {
	    this.editingNickname = true;
	    this.nickname = this.userInfo.nickName;
	  },
	  
	  editphonenumber() {
	    this.editingphonenumber = true;
	    this.phonenumber = this.userInfo.phonenumber;
	  },
	  
	  editpassword() {
	    this.editingpassword = true;
	    this.password = this.userInfo.password;
	  },
	  
	  
	  
	  // 修改 confirmEditNickname 方法
	  confirmEditNickname() {
	    if (this.nickname && this.nickname !== this.userInfo.nickName) {
	      // 构造更新用户信息的对象
	      const updateData = {
	        nickName: this.nickname,
	        userId: this.userInfo.userId,
	      };
	      // 发送更新用户信息的请求，并传递 userId 参数
	      updateInfo(updateData, this.userInfo.userId)
	        .then(res => {
	          if (res.code === 200) {
	            this.editingNickname = false;
	            this.userInfo.nickName = this.nickname;
	          } else {
	            console.error('更新昵称失败:', res);
	          }
	        })
	        .catch(error => {
	          console.error('请求失败:', error);
	        });
	    } else {
	      this.editingNickname = false;
	    }
	  },
	  
	  cancelEditNickname() {
	    this.editingNickname = false;
	  },
	  
	  confirmEditphonenumber() {
	    if (this.phonenumber && this.phonenumber !== this.userInfo.phonenumber) {
	      // 构造更新用户信息的对象
	      const updateData = {
	        avatar: this.userInfo.avatar,
	        phonenumber: this.phonenumber,
	        userId: this.userInfo.userId,
	        
	      };
	      // 发送更新用户信息的请求，并传递 userId 参数
	      updateInfo(updateData, this.userInfo.userId)
	        .then(res => {
	          if (res.code === 200) {
	            this.editingphonenumber = false;
	            this.userInfo.phonenumber = this.phonenumber;
	          } else {
	            console.error('更新昵称失败:', res);
	          }
	        })
	        .catch(error => {
	          console.error('请求失败:', error);
	        });
	    } else {
	      this.editingphonenumber = false;
	    }
	  },
	  
	  cancelEditphonenumber() {
	    this.editingphonenumber = false;
	  },
	  
	  confirmEditpassword() {
	    if (this.password && this.password !== this.userInfo.password) {
	      // 构造更新用户信息的对象
	      const updateData = {
	        avatar: this.userInfo.avatar,
	        password: this.password,
	        userId: this.userInfo.userId,
	        
	      };
	      // 发送更新用户信息的请求，并传递 userId 参数
	      updateInfo(updateData, this.userInfo.userId)
	        .then(res => {
	          if (res.code === 200) {
	            this.editingpassword = false;
	            this.userInfo.password = this.password;
	          } else {
	            console.error('更新昵称失败:', res);
	          }
	        })
	        .catch(error => {
	          console.error('请求失败:', error);
	        });
	    } else {
	      this.editingpassword = false;
	    }
	  },
	  
	  cancelEditpassword() {
	    this.editingpassword = false;
	  },
	  
	  
    loadData() {
      getUserInfo().then(res => {
        if (res.code === 200) {
          this.userInfo = res.user;
        }
      });
    },
    handleLogout() {
     
      console.log('点击了账号注销');
    },
	natoauthentication() {
		uni.navigateTo({
			url: `/pages/user/authentication`
		})
	},
  },
  computed: {
    // processedPassword() {
    //   if (this.userInfo && this.userInfo.password) {
    //     const frontPart = this.userInfo.password.substring(0, 4);
    //     const backPart = this.userInfo.password.substring(this.userInfo.password.length - 4);
    //     return `${frontPart}***${backPart}`;
    //   }
    //   return '';
    // }
  }
};
</script>



<style lang="scss">



.list-item {
	height: 120upx;
	font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10upx;
  color: #fff;
}

.arrow-icon {
  width: 20upx;
  height: 20upx;
}

.avatar {
  width: 80upx;
  height: 80upx;

  border-radius: 50%;
}

</style>
